import React, { useEffect, useState } from 'react';
import Store from './../redux/store';
import { addNum, jianNum } from './../redux/actions';
const Product = () => {
  // 把Store里面的state,赋值给组件的状态
  // const [number, setNumber] = useState(Store.getState().count);
  const [number, setNumber] = useState(Store.getState().a.count);

  useEffect(() => {
    // console.log(Store.getState()) //{count: 0}
    // 订阅仓库的State 的改变，即：监听仓库state的改变
    let unSubscribe = Store.subscribe(() => {
      // 当监听到store.state改变时，就执行这个回调函数
      // setNumber(Store.getState().count)
      setNumber(Store.getState().a.count)
    }); //subscribe（）返回一个函数，用于取消订阅

    // 在组件销毁之前，取消订阅
    return () => {
      unSubscribe(); // 取消订阅
    }
  });
  return (
    <div>
      <h1>product view</h1>
      <h4>count: {number}</h4>
      <button type='button' onClick={() => {
        Store.dispatch(addNum(10))
      }}>++</button>
      <button type='button' onClick={() => {
        Store.dispatch(jianNum(10))
      }}>--</button>

    </div>
  );
}

export default Product;
